<script setup lang="ts">
withDefaults(
  defineProps<{
    hideTitle?: boolean
  }>(),
  {
    hideTitle: false
  }
)
</script>

<template>
  <div w-full flex-center flex-1 py-1 v-bind="$attrs">
    <div flex="~ col" items-center>
      <div class="LoadingUi" lt-sm="scale-75" dark:invert-100 />
      <div v-if="!hideTitle" pt="20 lt-sm:16">加载...</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
/* Normal Usage */
.LoadingUi:before {
  transform: rotateX(60deg) rotateY(45deg) rotateZ(45deg);
  animation: 750ms rotateBefore infinite linear reverse;
}

.LoadingUi:after {
  transform: rotateX(240deg) rotateY(45deg) rotateZ(45deg);
  animation: 750ms rotateAfter infinite linear;
}

.LoadingUi:before,
.LoadingUi:after {
  box-sizing: border-box;
  content: '';
  display: block;
  position: absolute;
  margin-top: -5em;
  margin-left: -5em;
  width: 10em;
  height: 10em;
  transform-style: preserve-3d;
  transform-origin: 50%;
  transform: rotateY(180deg);
  perspective-origin: 50% 50%;
  perspective: 340px;
  background-size: 10em 10em;
  background-image: url();
  filter: contrast(75%);
}

/* sitNSpin.less */
@keyframes rotateBefore {
  from {
    transform: rotateX(60deg) rotateY(45deg) rotateZ(0deg);
  }

  to {
    transform: rotateX(60deg) rotateY(45deg) rotateZ(-360deg);
  }
}

@keyframes rotateAfter {
  from {
    transform: rotateX(240deg) rotateY(45deg) rotateZ(0deg);
  }

  to {
    transform: rotateX(240deg) rotateY(45deg) rotateZ(360deg);
  }
}
</style>
